<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>故障风格效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .demo1 {
      position: relative;
      margin: 20px;
      width: 420px;
      height: 236px;
      background: url('./img/xiaoniao.gif') #0fff;
      /*  background-blend-mode：CSS 属性定义该元素的背景图片，以及背景色如何混合*/
      background-blend-mode: lighten;
    }
    .demo1::after {
      content: '';;
      position: absolute;
      inset: 0;;
      margin-left: 5px;
      background: url('./img/xiaoniao.gif') #f40;
      background-blend-mode: lighten;
      /* mix-blend-mode： CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 */
      mix-blend-mode: darken; /*将父容器的背景和伪类的背景再次进行混合*/
      animation: shaken 300ms infinite;
    }
    @keyframes shaken {
      to {
        transform: translateX(5px);
      }
    }

    .demo2 {
      margin: 20px;
      width: 600px;
      height: 300px;
      background: url('./img/diqiu.png') no-repeat center/cover;
      position: relative;
    }
    .mix {
      position: absolute;
      left: 50%;
      top: 12%;
      width: 90px;
      height: 90px;
      transform: translateX(-50%);
      background: url('./img/dongman_2.gif') #fff;
   
      background-size: cover;
      mix-blend-mode: multiply;
      filter: contrast(3);
    }
  </style>
</head>
<body>
 <p>
  参考链接：<a href="https://www.douyin.com/user/MS4wLjABAAAAy68qgQPB-aGWv7MKIRB544hLgzY18xgXhywYjnN-XKk/search/%E6%95%85%E9%9A%9C%E9%A3%8E%E6%A0%BC?aid=d2542c7a-2789-4f0c-8e05-e53fc386df46&modal_id=7492047361854688538&type=general">
    渡一web学习频道-184集：纯css 实现故障风格图片
  </a>
 </p>
 <h3>demo1：</h3>
 <div class="demo1"></div>
 <h3>demo2:</h3>
 <div class="demo2">
    <div class="mix"></div>
 </div>
</body>
</html>